﻿<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <xsl:output method="html"/>

  <xsl:template match="/Navigator">
        
    <style type="text/css">      
      .modifiersx<xsl:value-of select="NavId"></xsl:value-of> { width: 100%; }
      .modifier<xsl:value-of select="NavId"></xsl:value-of> { float: left; width: 100%; margin-left: 0px; }
      .modifierLabel<xsl:value-of select="NavId"></xsl:value-of> { float: left; width: 65%; }
      .modifierGraphic<xsl:value-of select="NavId"></xsl:value-of> { background-color:#444444; height:10px; }
      .modifierHits<xsl:value-of select="NavId"></xsl:value-of> { float: right; width: 35%; position: relative; text-align: right; }
    </style>

    <xsl:variable name="navId" select="NavId"/>
    <xsl:variable name="unit" select="Unit"/>
    <xsl:variable name="showGraphicsPercentage" select="@ShowGraphicsPercentage"/>
    
    <div class="navigator">
      <div class="ms-WPTitle">
        <xsl:value-of select="Name"/>
      </div>
      <div class="modifiers{$navId}">
        <xsl:for-each select="AppliedItems">
          <xsl:for-each select="Item">
            <xsl:variable name="url" select="RemoveHref"/>
            <div class="modifier{$navId}">
              <div class="modifierHits{$navId}"></div>
              <div class="modifierLabel{$navId}">
                <a href="{$url}" title="Remove">
                  <img src="/_layouts/images/ewr044.GIF" border="0" style="margin-bottom:-5px;margin-right:2px;"/>
                  <xsl:value-of select="Value"/>
                  <xsl:text xml:space="preserve"> </xsl:text>
                  <xsl:value-of select="$unit"/>
                </a>
              </div>
            </div>
          </xsl:for-each>
        </xsl:for-each>
        <xsl:for-each select="Items">                   
          <xsl:for-each select="Item">
            <xsl:variable name="url" select="AddHref"/>
            <div class="modifier{$navId}">
              <div class="modifierHits{$navId}">
                <xsl:variable name="relPerc" select="RelativePercentage"/>
                <xsl:value-of select="relPerc"/>
                <xsl:choose>
                  <xsl:when test="$showGraphicsPercentage = 'true'">
                    <table style="width:100px;">
                      <tr>
                        <xsl:value-of select="relPerc"/>
                        <td class="modifierGraphic{$navId}" style="width:{$relPerc}%;" >
                          <xsl:text xml:space="preserve"> </xsl:text>
                        </td>
                        <td></td>
                      </tr>
                    </table>
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:value-of select="Count"/>
                  </xsl:otherwise>
                </xsl:choose>
              </div>
              <div class="modifierLabel">
                <a href="{$url}">
                  <xsl:value-of select="Value"/>
                  <xsl:text xml:space="preserve"> </xsl:text>
                  <xsl:value-of select="$unit"/>
                </a>
              </div>
            </div>
          </xsl:for-each>
        </xsl:for-each>
      </div>
      <div class="modifiers{$navId}" style="display:none;" id="navigator_more_{$navId}">
        <xsl:for-each select="AdditionalItems">          
          <xsl:for-each select="Item">
            <xsl:variable name="url" select="AddHref"/>
            <div class="modifier{$navId}">
              <div class="modifierHits{$navId}">
                <xsl:variable name="relPerc" select="RelativePercentage"/>
                <xsl:value-of select="relPerc"/>
                <xsl:choose>
                  <xsl:when test="$showGraphicsPercentage = 'true'">
                    <table style="width:100px;">
                      <tr>
                        <xsl:value-of select="relPerc"/>
                        <td class="modifierGraphic{$navId}" style="width:{$relPerc}%;" >
                          <xsl:text xml:space="preserve"> </xsl:text>
                        </td>
                        <td></td>
                      </tr>
                    </table>
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:value-of select="Count"/>
                  </xsl:otherwise>
                </xsl:choose>
              </div>
              <div class="modifierLabel{$navId}">
                <a href="{$url}">
                  <xsl:value-of select="Value"/>
                </a>
              </div>
            </div>
          </xsl:for-each>
        </xsl:for-each>
      </div>
      <xsl:for-each select="ShowMore">
        <div>          
          <!--Make sure the value of the variable below does NOT contain a line break, otherwise the javascript will fail!-->
          <xsl:variable name="showMore"  xml:space="preserve">See <xsl:value-of select="Count"/> more</xsl:variable>                      
          <xsl:variable name="showLess"  xml:space="preserve">Top <xsl:value-of select="TopCount"/></xsl:variable>             
          <a href="#" id="navigator_more_link_{$navId}" onclick="toggleMoreNavigatorItems('navigator_more_{$navId}','navigator_more_link_{$navId}','{$showMore}','{$showLess}'); return false;">
            <xsl:value-of select="$showMore"/>
          </a>
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
</xsl:stylesheet>
